{% extends "base.html" %}

{% block title %}接口申请 - 短视频去水印{% endblock %}

{% block content %}
<div class="row">
    <div class="col-md-12">
        <!-- 接口申请卡片 -->
        <div class="card">
            <div class="card-body">
                <h5 class="card-title">接口申请</h5>
                <p>尊敬的 <strong>{{ user.username }}</strong>，请点击下方 <code>申请接口</code> 按钮来申请你的 <code>接口信息</code>
                </p>
                {% if user.client_secret %}
                <button type="button" class="btn btn-primary btn-lg btn-block" disabled>
                    已申请
                </button>
                <a href="/" class="btn btn-success btn-lg btn-block">阅读开发文档</a>
                {% else %}
                <button type="button" id="getapi" class="btn btn-primary btn-lg btn-block" data-user-id="{{ user.id }}">
                    申请接口
                </button>
                {% endif %}
            </div>
        </div>

        <!-- 接口信息卡片 -->
        {% if user.client_secret %}
        <div class="card mt-4">
            <div class="card-body">
                <h5 class="card-title">接口信息</h5>
                <div class="alert alert-info">
                    <p>尊敬的 <strong>{{ user.username }}</strong>，您的接口信息如下：</p>
                </div>
                <div class="table-responsive">
                    <table class="table">
                        <tbody>
                        <tr>
                            <td width="180">接口 ID (clientId)：</td>
                            <td>
                                <code id="clientId">{{ user.client_id }}</code>
                                <button class="btn btn-sm btn-info copy-btn" data-clipboard-target="#clientId">复制
                                </button>
                            </td>
                        </tr>
                        <tr>
                            <td>接口密钥 (clientSecretKey)：</td>
                            <td>
                                <code id="secretKey">{{ user.client_secret }}</code>
                                <button class="btn btn-sm btn-info copy-btn" data-clipboard-target="#secretKey">复制
                                </button>
                            </td>
                        </tr>
                        <tr>
                            <td>接口地址：</td>
                            <td>
                                <code id="apiUrl">
                                    https://jk.lanzhuo.fun/api/dsp/{{ user.client_secret }}/{{ user.client_id
                                    }}/?url=短视频链接
                                </code>
                                <button class="btn btn-sm btn-info copy-btn" data-clipboard-target="#apiUrl">复制
                                </button>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        {% endif %}
    </div>
</div>
{% endblock %}

{% block scripts %}
<script src="/static/js/clipboard.min.js"></script>
<script>
    function message(type, text) {
        const div = document.createElement('div');
        div.textContent = text;
        div.style.position = 'fixed';
        div.style.top = '5%';
        div.style.left = '50%';
        div.style.transform = 'translate(-50%, -50%)';
        div.style.padding = '10px 30px';
        div.style.background = '#fff'; // 白色背景
        div.style.color = type === 'success' ? '#28a745' : '#dc3545'; // 成功绿/错误红
        div.style.fontSize = '14px';
        div.style.fontWeight = '100';
        div.style.border = `1px solid ${type === 'success' ? '#cccccc' : '#dc3545'}`;
        div.style.borderRadius = '8px';
        div.style.boxShadow = '0 4px 15px rgba(0,0,0,0.2)';
        div.style.zIndex = 9999;
        div.style.opacity = 0;
        div.style.transition = 'opacity 0.3s ease, transform 0.3s ease';

        document.body.appendChild(div);

        // 动画出现
        requestAnimationFrame(() => {
            div.style.opacity = 1;
            div.style.transform = 'translate(-50%, -50%) scale(1)';
        });

        // 1.5 秒后淡出并移除
        setTimeout(() => {
            div.style.opacity = 0;
            div.style.transform = 'translate(-50%, -50%) scale(0.9)';
            setTimeout(() => div.remove(), 300);
        }, 1500);
    }
</script>
<script>
    // 复制功能
    var clipboard = new ClipboardJS('.copy-btn');
    clipboard.on('success', function () {
        message('success', '复制成功');
    });
    clipboard.on('error', function () {
        message('error', '复制失败，请手动复制');
    });

    // 申请接口
    $("#getapi").click(function () {
        var userId = $(this).data("user-id");
        $.ajax({
            type: "post",
            url: "/user/getapi",
            data: {user_id: userId},
            dataType: "json",
            success: function (data) {
                if (data.code === 1) {
                    message('success', data.msg);
                    setTimeout(function () {
                        location.href = data.url;
                    }, 1000);
                } else {
                    message('error', data.msg);
                }
            },
            error: function () {
                message('error', '请检查你的网络');
            }
        });
    });
</script>
{% endblock %}
